<!--
 * @Description: 消息与信号
 * @Author: DHL
 * @Date: 2022-04-18 14:45:52
 * @LastEditors: DHL
 * @LastEditTime: 2023-01-20 10:27:54
-->

<template>
  <div class="process-panel-tab__content">
    <div class="process-panel-tab__content-table">
      <el-table :data="propertyList" size="small" border>
        <el-table-column type="index" label="序号" width="50px" />
        <el-table-column label="属性名" prop="name" min-width="100px" show-overflow-tooltip />
        <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />

        <el-table-column label="操作" prop="action" width="100px" align="center">
          <template #default="scope">
            <el-button
              link
              type="warning"
              title="编辑"
              @click="handleEdit(scope.row, scope.$index)"
            >
              <svg-icon className="process-icon" iconClass="editSquare"></svg-icon>
            </el-button>

            <el-button link type="danger" title="移除" @click="handleDelete(scope.$index)">
              <svg-icon className="process-icon" iconClass="delete"></svg-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="mt10">
      <el-button type="primary" size="small" style="width: 100%" @click="handleOpen()">
        <svg-icon className="process-icon" iconClass="plus"></svg-icon>
        添加属性
      </el-button>
    </div>
  </div>

  <!-- 属性配置弹框 -->
  <tw-dialog
    v-model="propertyFormVisible"
    title="属性配置"
    width="400px"
    :showZoom="false"
    @close="handleCloseProperty"
  >
    <el-form ref="dbPropertyFormRef" :model="dbPropertyForm" label-width="90px">
      <el-form-item label="属性名" prop="name">
        <el-input v-model="dbPropertyForm.name" clearable placeholder="请输入属性名"></el-input>
      </el-form-item>
      <el-form-item label="属性值" prop="value">
        <el-input v-model="dbPropertyForm.value" clearable placeholder="请输入属性值"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="handleCloseProperty()">取 消</el-button>
      <el-button type="primary" @click="handlePropertySubmit()">确 定</el-button>
    </template>
  </tw-dialog>
</template>

<script lang="ts">
  export default { name: 'PanelProperties' }
</script>

<script setup lang="ts">
  import { nextTick, onMounted, reactive, ref, watch } from 'vue'
  import { useBpmnStore } from '../../store/bpmn'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { assign, cloneDeep } from 'lodash-es'

  //////////////////////////////////////////////////
  // 属性
  //////////////////////////////////////////////////
  const bpmnStore = useBpmnStore()

  const propertyList: any = ref([])

  let bpmnElementPropertyList: any = []

  let propertyIndex = -1

  watch(
    () => bpmnStore.activatedElementId,
    (newVal) => {
      if (newVal) {
        nextTick(() => {
          resetAttributesList()
        })
      }
    },
    {
      immediate: true
    }
  )

  //////////////////////////////////////////////////
  // 函数
  //////////////////////////////////////////////////

  function resetAttributesList() {
    const bpmnElement = bpmnStore.activatedElement

    bpmnElementPropertyList = bpmnStore
      .getProperties()
      .reduce((pre: any, current: any) => pre.concat(current.values), [])

    propertyList.value = cloneDeep(bpmnElementPropertyList)
  }

  function handleOpen() {
    propertyFormVisible.value = true
    propertyIndex = -1

    assign(dbPropertyForm, {
      name: '',
      value: ''
    })
  }

  function handleEdit(row: any, index: number) {
    propertyFormVisible.value = true
    propertyIndex = index
    assign(dbPropertyForm, cloneDeep(row))
  }

  function handleDelete(index: number) {
    ElMessageBox.confirm('确认移除该属性吗?', '移除提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        bpmnElementPropertyList.splice(index, 1)
        propertyList.value.splice(index, 1)

        // 新建一个属性字段的保存列表
        const propertiesObject = bpmnStore.moddle.create(`${bpmnStore.prefix}:Properties`, {
          values: bpmnElementPropertyList
        })
        bpmnStore.updateElementExtensions([propertiesObject])
        resetAttributesList()
      })
      .catch(() => {
        ElMessage.info('操作被取消了')
      })
  }

  //////////////////////////////////////////////////
  // 属性表单
  //////////////////////////////////////////////////
  const propertyFormVisible = ref(false)

  const dbPropertyFormRef = ref()

  const dbPropertyForm = reactive({
    name: '',
    value: ''
  })

  function handleCloseProperty() {
    propertyFormVisible.value = false
  }

  function handlePropertySubmit() {
    const { name, value } = dbPropertyForm

    if (propertyIndex === -1) {
      // 新建属性字段
      const newPropertyObject = bpmnStore.moddle.create(`${bpmnStore.prefix}:Property`, {
        name,
        value
      })

      // 新建一个属性字段的保存列表
      const propertiesObject = bpmnStore.moddle.create(`${bpmnStore.prefix}:Properties`, {
        values: bpmnElementPropertyList.concat([newPropertyObject])
      })

      bpmnStore.updateElementExtensions([propertiesObject])
    } else {
      bpmnStore.updateModdleProperties(bpmnElementPropertyList[propertyIndex], {
        name,
        value
      })
    }

    handleCloseProperty()
    resetAttributesList()
  }

  //////////////////////////////////////////////////
  // 生命周期
  //////////////////////////////////////////////////
  onMounted(() => {
    nextTick(() => {})
  })
</script>
